<template>
 <div class="container">
   <div class="card-search">
    <el-form size="small" :inline="true" label-width="80px" :model="form" class="demo-form-inline">
      <el-form-item label="规格型号">
        <el-select filterable  clearable v-model="form.specification" placeholder="请选择">
            <el-option v-for="(item, index) in specifications" :key="index" :label="item" :value="item"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="直径规格">
        <el-select filterable  clearable v-model="form.diameter" placeholder="请选择">
            <el-option v-for="(item, index) in diameters" :key="index" :label="item" :value="item"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item style="float:right;" label=" ">
        <el-button  icon="el-icon-search" type="primary" @click="getAllData()">查询</el-button>
        <el-button  icon="el-icon-refresh" type="primary" plain @click="refresh()">重置</el-button>
      </el-form-item>
    </el-form>

    <el-dialog @close="close('crucibleForm')" width="60%" :modal-append-to-body="false" :title="title" :visible.sync="dialogFormVisible">
      <span slot="title">
        {{title=="坩埚成型质检"? '坩埚成型质检':'编辑已质检工单'}}
        <span style="margin-left:8px;font-size:14px; color:#888;">{{title=="坩埚成型质检"? `(工单编号:${selectRow.code} | 规格型号:${selectRow.diameter} | 直径规格:${selectRow.specification} | 坩埚数量:${selectRow.crucibleNumber})`:''}}</span>
      </span>
      <el-form size="medium" :inline="true"  :label-position="'right'" label-width="100px" ref="crucibleForm" :rules="crucibleRules" :model="crucibleForm">
        <!-- <el-form-item label="质检数量" prop="qualityTestingNum">
          <el-input style="width:300px;" type="number" v-model.number="crucibleForm.qualityTestingNum" autocomplete="off"></el-input>
        </el-form-item> -->
        <el-form-item label="重量(kg)" prop="crucible.weight">
          <el-input style="width:300px;" type="number" v-model.number="crucibleForm.crucible.weight" autocomplete="off"></el-input>
        </el-form-item>
        <!-- <el-form-item label="电阻率" prop="crucible.resistivity">
          <el-input style="width:300px;" type="number" v-model.number="crucibleForm.crucible.resistivity" autocomplete="off"></el-input>
        </el-form-item> -->
        <el-form-item label="外直径(mm)" prop="crucible.outerDiameter">
          <el-input style="width:300px;" type="number" v-model.number="crucibleForm.crucible.outerDiameter" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="内直径(mm)" prop="crucible.innerDiameter">
          <el-input style="width:300px;" type="number" v-model.number="crucibleForm.crucible.innerDiameter" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="外长度(mm)" prop="crucible.outerLength">
          <el-input style="width:300px;" type="number" v-model.number="crucibleForm.crucible.outerLength" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="内长度(mm)" prop="crucible.innerLength">
          <el-input style="width:300px;" type="number" v-model.number="crucibleForm.crucible.innerLength" autocomplete="off"></el-input>
        </el-form-item>
        <!-- <el-form-item label="正品数" prop="goodNumber">
          <el-input style="width:300px;" type="number" v-model.number="crucibleForm.goodNumber" autocomplete="off"></el-input>
        </el-form-item> -->
        <el-form-item label="废品数" prop="badNumber">
          <el-input style="width:300px;" type="number" v-model.number="crucibleForm.badNumber" autocomplete="off"></el-input>
        </el-form-item>
        <!-- <el-form-item label="质检人" prop="qualityTestingPeople">
          <el-input style="width:300px;" v-model="crucibleForm.qualityTestingPeople" autocomplete="off"></el-input>
        </el-form-item> -->
        <el-form-item label="质检说明" style="display:flex;width:100%;" prop="qualityTestingDesc">
          <el-input type="textarea" style="width:720px;" :autosize="{ minRows: 3, maxRows: 4}" v-model="crucibleForm.qualityTestingDesc" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="resetForm('crucibleForm')">取 消</el-button>
        <el-button type="primary" @click="onSubmit('crucibleForm')">确 定</el-button>
      </div>
    </el-dialog>
   </div>
   <div class="card-table">
        <el-table :header-cell-style="getRowClass" :data="tableData" style="width: 100%">
          <el-table-column fixed label="工单编号" align="center" width="104">
            <template slot-scope="{row}">
              <span>{{row.code}}</span>
            </template>
          </el-table-column>
          <el-table-column label="规格型号" align="center" width="100">
            <template slot-scope="{row}">
              <span>{{row.specification}}</span>
            </template>
          </el-table-column>
          <el-table-column label="直径规格" align="center" width="100">
            <template slot-scope="{row}">
              <span>{{row.diameter}}</span>
            </template>
          </el-table-column>
          <el-table-column label="坩埚数量" align="center" width="100">
            <template slot-scope="{row}">
              <span>{{row.crucibleNumber}}</span>
            </template>
          </el-table-column>
          <el-table-column label="状态" align="center">
            <template slot-scope="{row}">
              <el-tag size="medium" v-if="row.isQualityTesting" type="success">已 质 检</el-tag>
              <el-tag size="medium" v-else type="warning">待 质 检</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="质检时间" align="center" width="155">
            <template slot-scope="{row}">
              {{row.qualityTestingTime}}
            </template>
          </el-table-column>
          <el-table-column label="废品数" align="center" width="120">
            <template slot-scope="{row}">
              <span>{{row.badNumber == 0? '-':row.badNumber}}</span>
            </template>
          </el-table-column>
          <el-table-column label="质检人" align="center" width="120">
            <template slot-scope="{row}">
              <span>{{row.qualityTestingPeople == 0? '-':row.qualityTestingPeople}}</span>
            </template>
          </el-table-column>
          <el-table-column label="重量-kg" align="center" width="120">
            <template slot-scope="{row}">
              <span>{{row.crucible.weight == 0? '-':row.crucible.weight}}</span>
            </template>
          </el-table-column>
          <el-table-column label="密度-g/cm³" align="center" width="120">
            <template slot-scope="{row}">
              <span>{{row.crucible.density == 0? '-':row.crucible.density.toFixed(2) }}</span>
            </template>
          </el-table-column>
          <el-table-column label="内直径 - 外直径 mm" align="center" width="150">
            <template slot-scope="{row}">
              <span>{{row.crucible.innerDiameter == 0? ' - ':row.crucible.innerDiameter}}</span>
              <span> - </span>
              <span>{{row.crucible.outerDiameter == 0? ' - ':row.crucible.outerDiameter}}</span>
            </template>
          </el-table-column>
          <el-table-column label="内长度 - 外长度 mm" align="center" width="150">
            <template slot-scope="{row}">
              <span>{{row.crucible.innerLength == 0? ' - ':row.crucible.innerLength}}</span>
              <span> - </span>
              <span>{{row.crucible.outerLength == 0? ' - ':row.crucible.outerLength}}</span>
            </template>
          </el-table-column>
          <!-- <el-table-column label="电阻率" align="center" min-width="120">
            <template slot-scope="{row}">
              <span>{{row.resistivity}}</span>
            </template>
          </el-table-column> -->
          <el-table-column label="质检说明" show-overflow-tooltip align="center" min-width="200">
            <template slot-scope="{row}">
              <span>{{row.qualityTestingDesc}}</span>
            </template>
          </el-table-column>
          <el-table-column min-width="120" fixed="right" label="操作" align="center">
            <template slot-scope="{row}">
              <el-button :disabled="!row.editable" icon="el-icon-edit-outline" v-if="row.isQualityTesting" type="text" style="color:#4D70FF;" @click="title='编辑已质检工单',getQuality(row)" >编 辑</el-button>
              <el-button icon="el-icon-document-checked" v-else plain type="primary" style="padding:8px 12px;margin:0;" @click="title='坩埚成型质检',dialogFormVisible=true,selectRow=row" >质 检</el-button>
            </template>
          </el-table-column>
        </el-table>
      <div class="pagin" v-if="total>0">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>
   </div>
 </div>
</template>

<script>
import { crucibleFormingGet, crucibleFormingUpdate, getCrucibleFormConditions } from '@/api/crucible.js'
import { nomalPages } from '@/mixin'
export default {
  name: 'test',
  mixins: [nomalPages],
  components: {},
  data () {
    return {
      form: { // 搜索表单
        specification: '',
        diameter: ''
      },
      title: '',
      selectRow: '',
      dialogFormVisible: false,
      crucibleForm: {
        qualityTestingNum: '',
        badNumber: '',
        qualityTestingPeople: this.$store.getters.getUserName,
        qualityTestingDesc: '',
        crucible: {
          weight: '',
          outerDiameter: '',
          innerDiameter: '',
          outerLength: '',
          innerLength: ''
        }
      },
      specifications: '',
      diameters: '',
      tableData: [],
      currentPage: 1,
      pageSize: 10,
      total: 1,
      crucibleRules: {
        qualityTestingNum: [
          { required: true, message: '请输入质检数量', trigger: 'blur' }
        ],
        'crucible.weight': [
          { required: true, message: '请输入重量', trigger: 'blur' }
        ],
        // 'crucible.resistivity': [
        //   { required: true, message: '请输入电阻率', trigger: 'blur' }
        // ],
        'crucible.outerDiameter': [
          { required: true, message: '请输入外径', trigger: 'blur' }
        ],
        'crucible.innerDiameter': [
          { required: true, message: '请输入内径', trigger: 'blur' }
        ],
        'crucible.outerLength': [
          { required: true, message: '请输入外长度', trigger: 'blur' }
        ],
        'crucible.innerLength': [
          { required: true, message: '请输入内长度', trigger: 'blur' }
        ],
        badNumber: [
          { required: true, message: '请输入次品数', trigger: 'blur' }
        ]
      }
    }
  },
  computed: {},
  watch: {},
  created () {},
  mounted () {
    getCrucibleFormConditions().then(res => {
      this.diameters = res.data.data.diameter
      this.specifications = res.data.data.specification
    })
  },
  methods: {
    getAllData () {
      const params = {
        ...this.form
      }
      crucibleFormingGet(params).then(res => {
        // console.log(res)
        if (res.data.code === 200) {
          this.tableData = res.data.data.pageData
          this.total = res.data.data.total
        } else {
          this.$message({
            message: res.data.message,
            type: 'warning'
          })
        }
      })
    },
    getQuality (row) {
      this.crucibleForm = { ...row }
      this.dialogFormVisible = true
    },
    onSubmit (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.title === '坩埚成型质检') {
            this.qualityOne()
          } else {
            this.editOne()
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    qualityOne () {
      const payload = {
        ...this.selectRow,
        ...this.crucibleForm
      }
      payload.isQualityTesting = true
      payload.qualityTestingNum = this.selectRow.crucibleNumber
      const dateNow = new Date()
      var year = dateNow.getFullYear()
      var month = dateNow.getMonth() + 1 // js从0开始取
      var date1 = dateNow.getDate()
      var hour = dateNow.getHours()
      var minutes = dateNow.getMinutes()
      var second = dateNow.getSeconds()
      payload.qualityTestingTime = year + '-' + month + '-' + date1 + ' ' + hour + ':' + minutes + ':' + second
      crucibleFormingUpdate(payload).then(res => {
        if (res.data.code === 200) {
          this.$message({
            message: '质检成功',
            type: 'success'
          })
          this.dialogFormVisible = false
          this.getAllData()
        } else {
          this.$message({
            message: res.data.message,
            type: 'warning'
          })
        }
      })
    },
    editOne () {
      const payload = {
        ...this.selectRow,
        ...this.crucibleForm
      }
      crucibleFormingUpdate(payload).then(res => {
        if (res.data.code === 200) {
          this.$message({
            message: '修改成功',
            type: 'success'
          })
          this.dialogFormVisible = false
          this.getAllData()
        } else {
          this.$message({
            message: res.data.message,
            type: 'warning'
          })
        }
      })
    },
    resetForm (formName) {
      this.dialogFormVisible = false
      this.getAllData()
      this.$refs[formName].resetFields()
    }
  }
}
</script>
<style >
.el-tooltip__popper{font-size: 14px; max-width:30% }
</style>
<style  scoped>
.pagin{
  display: flex;
  justify-content: right;
  padding: 12px 12px 0 0;
}
.pagin  .el-pager .active{
  background-color: $primary !important;
}
</style>
